﻿<!--添加题目-->
<div id="add-que">
  <div class="scrollable">
    <!--题目表单开始-->
    <div class="form-horizontal">
      <!--从属-->
      <div class="form-group">
        <div class="col-sm-2 control-label"><label>从属</label></div>
        <div class="col-sm-8 controls">
          <select v-model="practice.taskId" class="form-control width-150">
            <option value="0" selected>默认教学计划</option>
            <template v-for="ts in tasks">
              <option :value="ts.id">{{ts.name}}</option>
            </template>
          </select>
          <div class="help-block">可以针对本课程、某个教学计划或者某个学习任务出题</div>
        </div>
      </div>
      <!--难度-->
      <div class="form-group">
        <div class="col-sm-2 control-label"><label>难度</label></div>
        <div class="col-sm-8 controls radios">
          <label><input type="radio" name="difficulty" value="0" v-model="practice.difficulty"> 简单</label>
          <label><input type="radio" name="difficulty" value="1" v-model="practice.difficulty"> 一般</label>
          <label><input type="radio" name="difficulty" value="2" v-model="practice.difficulty"> 困难</label>
        </div>
      </div>
      <!--题干-->
      <div class="form-group">
        <div class="col-sm-2 control-label">
          <label class="control-label-required">题干</label>
        </div>
        <div class="col-sm-8 controls">
          <textarea class="form-control" rows="5" v-model="practice.stem"></textarea>
        </div>
      </div>
      <!--答案-->
      <div class="question-options">
        <div class="question-options-group">
          <!--问答题显示-->
          <div class="form-group" v-if="practice.type==2">
            <div class="col-sm-2 control-label">
              <label class="control-label-required">答案</label>
            </div>
            <div class="col-sm-8 controls">
              <textarea v-model="practice.options[0].result" class="form-control datas-input col-sm-8" rows="5"></textarea>
            </div>
          </div>
          <!--选择题显示-->
          <template v-if="practice.type!=2">
            <opt-div  v-for="(opt, index) in practice.options" :key="index+1"
                      :opt="opt" :index="index" :type="practice.type" :option.sync="practice.option"/>
            <!--选项列表-->
            <div class="form-group">
              <div class="col-sm-8 col-sm-offset-2">
                <a @click="addOpt" class="btn btn-success btn-sm pull-right">新增选项</a>
              </div>
            </div>
          </template>
        </div>
      </div>
      <!--高级选项控制-->
      <div class="form-group">
        <div class="col-sm-8 col-sm-offset-2 controls ">
          <a href="javascript:" data-toggle="collapse" data-role="advanced-collapse"
             data-target="#advanced-collapse" class="color-success" aria-expanded="true">
            » 显示/隐藏 高级选项 ...
          </a>
        </div>
      </div>
      <!--高级选项-->
      <div id="advanced-collapse" class="advanced-collapse collapse"
           aria-expanded="false" style="height: 0;">
        <div class="form-group">
          <div class="col-sm-2 control-label"><label for="question-analysis-field">解析</label></div>
          <div class="col-sm-8 controls">
            <textarea id="question-analysis-field" v-model="practice.analysis" class="form-control" rows="4"></textarea>
          </div>
        </div>
      </div>
    </div>
    <!--题目表单结束-->
  </div>
  <div class="modal-footer-inline">
    <button @click="saveOrUpdate" class="btn btn-primary submit-btn">保存</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  </div>
</div>

<template id="opt-div"> <!--单一选项组件-->
  <div class="form-group">
    <div class="col-sm-2 control-label">
      <label class="choice-label control-label-required">选项{{getOptLetter()}}</label>
    </div>
    <div class="col-sm-8 controls">
      <textarea class="form-control datas-input col-sm-8" rows="4" v-model="opt.result"></textarea>
      <div class="mtm">
        <label v-if="type==0">
          <input type="radio" name="rightOpt" @click="$emit('update:option', index)">正确答案</label>
        </label>
        <label v-if="type==1">
          <input type="checkbox" name="rightOpt" v-model="opt.right">正确答案</label>
        </label>
      </div>
    </div>
    <!--删除选项按钮-->
    <div class="col-sm-2">
       <span @click="removeOpt(index)" class="btn btn-default btn-sm">
          <i class="glyphicon glyphicon-trash"></i>
        </span>
    </div>
  </div>
</template>
<script>
  var SPV = new Vue({
    el: '#add-que',
    data: {
      tasks: praVm.tasks,
      practice: null,
      page: {
        pageNum: 1,
        totalPages: 1
      },
      deleteOptions: []
    },
    methods: {
      checkForm: function(){
        var pra = this.practice;
        if (isEmpty(pra.stem)) {
          layer.msg("题干不能为空！", {time: 1200});
        } else if (pra.stem.length < 7) {
          layer.msg("题干太短了！", {time: 1200});
        } else if (pra.options.length<=0) {
          layer.msg("至少要有一个选项！", {time: 1200});
        } else return this.checkOpt();
        return false;
      },
      checkOpt: function() {
        var c = false;
        console.log(11);
        for (var i = 0; i < this.practice.options.length; i++) {
          var opt = this.practice.options[i];
          if (isEmpty(opt.result)) {
            layer.msg("不允许存在空的选项！", {time: 1200});
            return false;
          }
          if (this.practice.option >= 0 || opt.right || opt.right===1){
            c = true;
          }
        }
        if (!c) {
          layer.msg("必须勾选正确答案！", {time: 1200});
          return false;
        }
        return true;
      },
      saveOrUpdate: function () {
        if (this.checkForm()) {
          var self = this;
          var practice = this.practice; //$.extend(true, {}, );
          var opts = practice.options; //practice.options=null;
          var option = '';
          for (var i = 0; i < opts.length; i++) {
            var opt = opts[i];
            if (this.practice.type === 0) { // 单选
              opt.right = 0;
              if (this.practice.option === i) opt.right = 1;
            } else if (this.practice.type === 1) { // 多选
              if (opt.right) {
                opt.right = 1;
                option += (opt.option + ',');
              } else opt.right = 0;
            }
          }
          if (this.practice.type === 1) this.practice.option = option;
          var tp = 'add';
          if (self.practice.id > 0) tp = 'change';
          $.post('/course/set/practice/${kid}/' + tp, practice, function (data) {
            if (data.success) {
              self.practice = $.extend({}, self.practice, data.payload);
              self.practice.options = opts;
              if (tp === 'add') {
                praVm.practices.unshift(self.practice);
              }
              tp = 'add';
              for (var i = 0; i < opts.length; i++, tp = 'add') {
                var opt = opts[i];
                opt.practiceId = self.practice.id;
                if (opt.id > 0) tp = 'change';
                $.post('/course/set/praOption/${kid}/' + tp, opt, function (ds) {
                  if (ds.success) {
                    self.practice.options[ds.payload.option].id = ds.payload.id;
                  } else {
                    console.error(ds)
                  }
                });
              }
              self.clearDelete(); // 将delete中选项删除
              layer.msg('操作成功！', {icon: 6, time: 1200});
              hide();
            }
          });
        }
      },
      addOpt: function () {
        var len = this.practice.options.length;
        this.practice.options.push({practiceId:this.practice.id,result:'',option:len,right:0,id:0});
      },
      clearDelete: function () {
        this.deleteOptions.forEach(function (opt) {
          if (opt.id > 0) {
            $.post('/course/set/praOption/${kid}/delete/' + opt.id);
          }
        })
      }
    },
    components: {
      'opt-div': {
        data: function() {
          // 单选题，多选题，问答题
          return {inpType: ['radio', 'checkbox', 'hidden']}
        },
        props: ['opt', 'index', 'type', 'option'],
        template: '#opt-div',
        methods: {
          getOptLetter: function () {
            this.opt.option = parseInt(this.index);
            var number = "A".charCodeAt();
            return String.fromCharCode(number + this.opt.option);
          },
          removeOpt: function (index) {
            var opt = this.$root.practice.options.splice(index, 1);
            if (opt[0].id > 0) {
              this.$root.deleteOptions.push(opt[0]);
            }
          }
        }
      }
    },
    created: function () {
      this.practice = praVm.practice;
      this.options = praVm.practice.options;
      if (this.practice.id <= 0) {
        this.practice = $.extend({}, this.practice, {courseId: ${kid}, difficulty: 1, option: -1, options: []});
        var len = 4;
        if (this.practice.type === 2) len = 1;
        var opts = this.practice.options;
        for (var i = 0; i < len; i++) {
          opts.push({practiceId: this.practice.id, result: '', option: i, right: 0, id:0});
        }

      }
    },
    mounted: function () {
      if (this.practice.type===0&&this.practice.id>0) {
        var index = this.practice.option;
        $('.question-options-group input[type=radio]').eq(index).attr('checked','');
      }
    }
  });
</script>